
<template>
  <div style=" height:100%;width:100%;position:relative;">
      <div class="pagetop">
          <div class="search-title">快速查询</div>
          <el-input v-model="txtsearch" placeholder="耐药机制代码|名称|备注" style="width:200px"></el-input>
          <div class="top-deal">
              <el-button @click="btnQuery" icon="el-icon-search" type="primary" v-has="'PINQUERY'">查询</el-button>
              <el-button @click="btnAdd" icon="el-icon-plus" v-has="'PADD'">新增</el-button>
              <el-button @click="btnDel" icon="el-icon-delete" v-has="'PDELETE'">删除</el-button>
              <el-button @click="btnSave" icon="el-icon-document" v-has="'PMODIFY'">保存</el-button>
              <el-button @click="btnExport" icon="el-icon-upload2">导出</el-button>
              <el-button icon="el-icon-files" @click="ImportCsv" ref="importFile">导入</el-button>
              <div class="upload-button">
                  <el-upload ref="upload" :action="url" accept=".dat" :before-upload="beforeUploadFile" :on-change="fileChange" :show-file-list="showFile" :data="updata" :http-request="uploadOpt">
                      <el-button size="small" plain>选择文件</el-button>
                      <!-- <div slot="tip" class="el-upload__tip">只能上传DAT(*dat)文件，且不超过10M</div> -->
                  </el-upload>
              </div>
          </div>
      </div>
      <div class="pagecenter">
          <vxe-table :data="list" :loading="bLoading" :keyboard-config="keyConfig" :select-config="selectConfig" :sort-config="{trigger: 'cell'}" :edit-config="{
              trigger: 'click',
              mode: 'cell',
              showStatus: true,
              activeMethod: activeMethod,
              showIcon: false,
            }" border fit height="auto" header-align="center" highlight-current-row highlight-hover-row highlight-hover-column ref="xTable" resizable @edit-closed="EditClose" show-header-overflow="tooltip" show-overflow="false" size="mini" stripe :row-class-name="rowClassName">
              <vxe-table-column field="rescode" title="耐药机制代码" width="120">
                  <template v-slot:header="{column}">
                      <span style="color:#F56C6C;">耐药机制代码</span>
                  </template>
                  <template v-slot="{ row,rowIndex }">
                      <el-input v-model="row.rescode" @focus="Focus($event)" @input="RepRescode(row)"></el-input>
                  </template>
              </vxe-table-column>
              <vxe-table-column field="resname" title="耐药机制名称" width="220" :edit-render="{name:'input', autoselect: true}">
                  <template v-slot:header="{column}">
                      <span style="color:#F56C6C;">耐药机制名称</span>
                  </template>
              </vxe-table-column>
              <!--   :edit-render="{name:'textarea',autoselect: true}" -->
              <vxe-table-column field="rescomments" title="备注" width="350">
                  <template v-slot="{ row,rowIndex }">
                      <el-input v-model="row.rescomments" type="textarea" autosize @focus="Focus($event)" @change="RepResComments(row)"></el-input>
                  </template>
              </vxe-table-column>
              <vxe-table-column field="validflag" title="在用" width="80" align="center">
                  <template v-slot:header="{column}">
                      <span style="color:#F56C6C;">在用</span>
                  </template>
                  <template v-slot="{row}">
                      <el-checkbox v-model="row.validflag" true-label="1" false-label="0"></el-checkbox>
                  </template>

              </vxe-table-column>
              <vxe-table-column field="alertflag" title="危急值标志" width="80" align="center">
                  <template v-slot:header="{column}">
                      <span style="color:#F56C6C;">危急值标志</span>
                  </template>
                  <template v-slot="{row}">
                      <el-checkbox v-model="row.alertflag" true-label="1" false-label="0"></el-checkbox>
                  </template>
              </vxe-table-column>
              <vxe-table-column field="whonetcode" title="WHONET代码" width="280">
                  <template v-slot="{ row }">
                      <el-select v-model="row.whonetcode" placeholder="" style="width:100%">
                          <el-option v-for="item in whonetResistOption " :key="item.value" :label="'['+item.value+']'+item.label" :value="item.value" filterable>
                          </el-option>
                      </el-select>
                  </template>
              </vxe-table-column>
              <vxe-table-column field="seq" title="序号" width="60" align="center" :edit-render="{
                name: 'input',
                autoselect: true,
              }">
              </vxe-table-column>
          </vxe-table>
      </div>
  </div>
</template>



<script type="text/javascript">
import XEUtils from "xe-utils";
import axios from "axios";
export default {
  name: "LIS822",
  data() {
      return {
          txtsearch: "",
          bLoading: false,
          keyConfig: {
              isDel: true,
              isTab: true,
              isEdit: true,
              isArrow: true,
          },
          keyLocalConfig: {
              isArrow: true,
          },
          selectConfig: { tigger: "row" },
          AddData: [],
          ModData: [],
          xTableData: [],
          whonetResistOption: [],
          form: {},
          showFile: false,
          url: "",
          updata: { action: "BACCOMMOMUPLOAD" },
      };
  },
  watch: {
      txtsearch(val) {
          let row = this.list[0];
          if (row) {
              this.HightLightRow(row);
          } else {
              this.HightLightRow(false);
          }
      },
  },
  computed: {
      //模糊查询
      list() {
          let filterName = this.txtsearch.trim();
          if (filterName) {
              let rest = this.xTableData.filter((item) => {
                  return item.resname.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || item.rescomments.toUpperCase().indexOf(filterName.toUpperCase()) > -1 || (item.rescode ? item.rescode.toUpperCase().indexOf(filterName.toUpperCase()) > -1 : false);
              });
              return rest;
          } else {
              return this.xTableData;
          }
      },
      //排序
      autoSeq() {
          let len = this.$refs.xTable.tableData.length;
          return (len + 1) * 10;
      },
  },
  mounted() {
      this.url = this.$tool.baseUrl.replace(/api/, "z") + "fileupload";
      this.initoption();
  },
  updated() {},
  methods: {
      //----------------- 查询类 ----------------- //
      initoption() {
          if (!this.$ddldata.IsAreaMode) {
              this.bAreaFlag = true;
          }
          this.$tool
              .request({
                  url: "LIS/LIS8/LIS822",
                  method: "post",
                  data: {
                      action: "initoption",
                  },
              })
              .then((res) => {
                  this.whonetResistOption = res.whonetResistOption;
                  this.btnQuery();
              });
      },
      //主表查询
      async btnQuery() {
          try {
              this.AddData = [];
              this.ModData = [];
              this.bLoading = true;
              const res = await this.$tool.request({
                  url: "LIS/LIS8/LIS822",
                  method: "post",
                  data: {
                      action: "bact_resdict_query",
                  },
              });
              if (res.data.length > 0) {
                  this.xTableData = res.data;
                  this.HightLightRow(res.data[0]);
              }
              this.bLoading = false;
          } catch (e) {
              this.bLoading = false;
              this.$alert(e);
          }
      },
      FunscrollY() {
          this.$nextTick(() => {
              var alldataLen = this.$refs.xTable.tableData.length;
              let L = this.$refs.xTable.tableData[alldataLen - 1];
              this.$refs.xTable.setCurrentRow(L);
              this.$refs.xTable.setActiveRow(L, "rescode");
              this.$refs.xTable.scrollToRow(L);
          });
      },
      //----------------- 按钮类 -----------------//
      //新增
      btnAdd() {
          this.$refs.xTable.insertAt(
              {
                  //存储
                  rescode: "",
                  resname: "",
                  rescomments: "",
                  validflag: "1",
                  alertflag: "0",
                  whonetcode: "",
                  seq: this.autoSeq,
              },
              -1
          );
          this.$nextTick(() => {
              this.FunscrollY();
          });
      },
      //删除 -- 弹窗提示
      btnDel() {
          this.$confirm("您确定要删除这条数据吗？", {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
          })
              .then(() => {
                  this.confirmDel();
              })
              .catch(() => {});
      },
      //删除 -- 确认删除
      async confirmDel() {
          try {
              let delrow = this.$refs.xTable.getCurrentRow();
              if (delrow) {
                  var alld = this.$refs.xTable.tableData;
                  var rowindex = alld.indexOf(delrow);
                  this.$refs.xTable.remove(delrow);
                  let havedata = this.$refs.xTable.tableData;
                  if (havedata.length > 0) {
                      if (rowindex >= havedata.length) rowindex = havedata.length - 1;
                      let selectrow = havedata[rowindex];
                      this.HightLightRow(selectrow);
                  } else {
                      this.HightLightRow(false);
                  }
              }
          } catch (e) {
              console.log("error", e);
          }
      },

      //保存 -- 保存新增，修改，删除主表: lab_medgroup 子表: lab_medgroupdetail 操作//
      async btnSave() {
          try {
              let date = this.$refs.xTable.getTableData().fullData;
              date.sort((a, b) => {
                  return a.seq - b.seq;
              });
              for (let i = 0, len = date.length; i < len; i++) {
                  let tempseq = (i + 1) * 10;
                  if (tempseq !== date[i].seq) {
                      date[i].seq = tempseq;
                  }
              }
              const res = await this.$tool.request({
                  url: "LIS/LIS8/LIS822",
                  method: "post",
                  data: {
                      action: "bact_resdict_save",
                      bact_resdictdetail: this.$refs.xTable.getRecordset(),
                  },
              });
              if (res.errcode == "1") {
                  this.btnQuery();
                  this.$message.success("保存成功！");
              } else {
                  this.$message.error("保存失败！" + res.errmsg);
              }
          } catch (e) {
              this.$alert(e);
          }
      },
      //导出
      btnExport() {
          let p = { prgno: "LIS822" };
          this.$pub.commexport(this, p, `耐药机制.dat`);
      },
      //导入 -- 暂无
      btnImport() {},
      //--------------- 数据改变及其他功能 ---------------//
      activeMethod({ row }) {
          return true;
      },
      //设置高亮选中行
      async HightLightRow(row) {
          if (!!row) {
              this.$refs.xTable.setCurrentRow(row);
          } else {
              this.$refs.xTable.setCurrentRow(null);
          }
      },
      Focus(event) {
          event.currentTarget.select();
      },
      EditClose({ row, column, rowIndex }) {
          if (column.property == "resname") {
              this.$refs.xTable.$refs.tableBody.$children[rowIndex * 3].$el.focus();
              console.log("EditClose -> this.$refs.xTable.$refs.tableBody", this.$refs.xTable.$refs.tableBody);
          }
      },
      RepResComments(row) {
          var reg = /\n(\n)*( )*(\n)*\n/g;
          row.rescomments = row.rescomments.replace(reg, "\n");
      },
      RepRescode(row) {
          var reg = new RegExp(/[,|，]/, "g");
          row.rescode = row.rescode.replace(reg, "");
      },
      //----------------- class -----------------//
      //右侧子表 row class
      rowClassName({ row, rowIndex }) {
          let isDirty = this.$refs.xTable.hasRowChange(row);

          if (row.validflag == "0") {
              return "rm-alert";
          }
          if (isDirty) {
              return "row-modify";
          }
          if (this.$refs.xTable.hasRowInsert(row)) {
              return "row-new";
          }
      },
      ImportCsv() {
          this.$refs["upload"].$refs["upload-inner"].handleClick();
      },
      // 上传文件之前的钩子, 参数为上传的文件,若返回 false 或者返回 Promise 且被 reject，则停止上传
      beforeUploadFile(file) {
          let extension = file.name.substring(file.name.lastIndexOf(".") + 1);
          let size = file.size / 1024 / 1024;
          if (extension !== "dat") {
              this.$notify.warning({
                  title: "警告",
                  message: `只能上传DAT(*dat)文件，且不超过10M`,
              });
          }
          if (size > 10) {
              this.$notify.warning({
                  title: "警告",
                  message: `文件大小不得超过10M`,
              });
          }
      },
      uploadOpt(content) {
          let formData = new FormData();
          formData.append("action", "BACCOMMOMUPLOAD");
          formData.append("file", content.file);
          var URL = this.$tool.baseUrl.replace("api", "z") + "fileupload";
          axios.post(URL, formData, { "Content-Type": "multipart/form-data" })
              .then(res => {
                  let response = res.data;
                  if (response.flag == 1) {
                      this.$notify.success({
                          title: "成功",
                          message: `文件上传成功`,
                      });
                      this.btnQuery();
                  } else {
                      this.$notify.error({
                          title: "错误",
                          message: response.msg,
                      });
                  }
              })
              .catch(e => {
                  this.$alert(e, "出错");
              });
      },
      // 文件状态改变时的钩子
      fileChange(file, fileList) {
          this.form.file = file.raw;
      },
  },
};
</script>
<style scoped>
.pagetop {
  width: 100%;
  height: 35px;
  display: -webkit-box;
  -webkit-box-pack: left;
  -webkit-box-align: center;
  border: 1px solid #ccc;
  position: absolute;
  z-index: 99;
}

.pagecenter {
  position: absolute;
  top: 40px;
  width: 100%;
  left: 0;
  bottom: 0px;
  overflow: auto;
}

.search-title {
  margin: 0 5px 0 20px;
  font-size: 12px;
}
.top-deal {
  right: 5px;
  position: absolute;
  top: 5px;
  display: flex;
  align-items: center;
}
.detaixTable {
}
/* /deep/.pagecenter tr td div .el-input__inner {
  border: 1px solid rgba(255, 254, 254, 0) !important;
  background-color: rgba(255, 254, 254, 0) !important;
} */
/deep/.el-textarea__inner {
  display: block;
  resize: vertical;
  padding: 2px 4px;
}
/deep/ .el-button.is-disabled {
  border: 0px;
  color: grey;
  background-color: #e6e6e6;
  font-weight: normal;
}
/deep/ tr.vxe-body--row.row-modify {
  color: blue;
}
/deep/ tr.vxe-body--row.row-new {
  color: #cc6600;
}
/* /deep/ .vxe-table.size--mini .vxe-default-input,
.vxe-table.size--mini .vxe-default-select,
.vxe-table.size--mini .vxe-default-textarea,
.vxe-table.size--mini .vxe-input--wrapper {
  height: 86px !important;
}
/deep/.vxe-body--row,
.vxe-body--row.row--current,
.vxe-body--row.row--hover {
  height: 86px !important;
} */
/deep/.vxe-body--row,
.vxe-body--row.row--current,
.vxe-body--row.row--hover {
  vertical-align: top;
}
.table1style tr td {
  padding: 0px 2px 0px 2px;
}

.upload-button {
  height: 24px;
  margin: 0 10px;
  display: none;
}
.upload-button div {
  height: 24px;
}
</style>